{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Task Management System{% endblock %}</title>
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <link rel="icon" type="image/svg+xml" href="{% static 'svg/task.svg' %}">
    <script src="{% static 'js/chart.min.js' %}"></script>
    <link rel="stylesheet" href="/static/css/custom.css">

    <style>

        .total_tasks {
            color: #0831d9;
        }

        .done_count {
            color: #07e323;
        }

        .in_progress_count {
            color: #d91525;
        }

        body {
            padding-top: 60px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fb;
            color: #333;
        }

        .zym {
            padding-top: 200px;
        }

        .task-card {
            margin-bottom: 15px;
            transition: transform 0.2s;
        }

        .task-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .task-status-todo {
            border-left: 5px solid #dc3545;
        }

        .task-status-in_progress {
            border-left: 5px solid #ffc107;
        }

        .task-status-done {
            border-left: 5px solid #28a745;
        }

        .task-columns {
            display: flex;
            gap: 20px;
            overflow-x: auto;
        }

        .task-column {
            min-width: 300px;
            width: 33%;
        }

        @media (max-width: 768px) {
            .task-columns {
                flex-direction: column;
            }

            .task-column {
                width: 100%;
            }
        }

        footer {
            margin-top: auto;
            padding: 20px 0;
            background-color: #f8f9fa;
        }

        .anonymous-badge {
            background-color: #6c757d;
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.8em;
        }


        :root {
            --primary-color: #4361ee;
            --secondary-color: #3f37c9;
            --success-color: #4cc9f0;
            --info-color: #4895ef;
            --warning-color: #f72585;
            --danger-color: #e63946;
            --light-color: #f8f9fa;
            --dark-color: #212529;
        }


        .navbar-brand {
            font-weight: 600;
            font-size: 1.25rem;
            color: white;
        }

        .navbar-brand i {
            margin-right: 0.5rem;
        }


        .nav-link:hover {
            background-color: rgba(67, 97, 238, 0.05);
            color: var(--primary-color);
            border-left: 3px solid var(--primary-color);
        }

        .nav-link.active {
            background-color: rgba(67, 97, 238, 0.1);
            color: var(--primary-color);
            border-left: 3px solid var(--primary-color);
            font-weight: 500;
        }

        .nav-link i {
            margin-right: 0.5rem;
            width: 20px;
            text-align: center;
        }

        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            transition: transform 0.3s, box-shadow 0.3s;
            margin-bottom: 1.5rem;
        }


        .card-header {
            background-color: #fff;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            font-weight: 600;
            padding: 1rem 1.25rem;
            border-radius: 10px 10px 0 0 !important;
        }

        .card-body {
            padding: 1.25rem;
        }

        .page-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin: 0;
            color: #333;
        }

        {##}
        .stat-card {
            border-radius: 10px;
            padding: 1.5rem;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .stat-card .stat-title {
            font-size: 0.875rem;
            font-weight: 500;
            color: #6c757d;
            margin-bottom: 0.5rem;
        }

        .stat-card .stat-value {
            font-size: 2rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .stat-card .stat-link {
            align-self: flex-start;
            margin-top: auto;
        }

        .stat-card.primary {
            background-color: rgba(67, 97, 238, 0.1);
            color: var(--primary-color);
        }

        .stat-card.success {
            background-color: rgba(76, 201, 240, 0.1);
            color: var(--success-color);
        }

        .stat-card.info {
            background-color: rgba(72, 149, 239, 0.1);
            color: var(--info-color);
        }

        .stat-card.warning {
            background-color: rgba(247, 37, 133, 0.1);
            color: var(--warning-color);
        }

    </style>
    {% block extra_css %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
        <a class="navbar-brand" href="{% url 'task-list' %}">Task Manager</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">

                <li class="nav-item">
                    <a class="nav-link" href="{% url 'task-list' %}">
                        <i class="bi bi-list-task"></i> 任务列表
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'task-create' %}">
                        <i class="bi bi-plus-circle"></i> 新建任务
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'dashboard' %}">
                        <i class="bi bi-list-task"></i> 可视化
                    </a>
                </li>
                <li class="nav-item">
                    <div class="dropdown">
                        <button class="btn btn-info dropdown-toggle navbar-dark" type="button"
                                data-bs-toggle="dropdown"
                                aria-expanded="false">
                            接口文档
                        </button>
                        <ul class="dropdown-menu dropdown-menu-dark">
                            <li><a class="dropdown-item active" href="{% url 'swagger-ui' %}"
                                   target="_blank">swagger-ui</a></li>
                            <li><a class="dropdown-item" href="{% url 'redoc' %} " target="_blank">redoc</a></li>
                        </ul>
                    </div>
                </li>

            </ul>
            <ul class="nav justify-content-end">
            <li class="navbar-nav nav-item dropdown">
                {% if user.is_authenticated %}
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                       data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="bi bi-person-circle"></i> {{ user.username }}
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="{% url 'user-center' %}"><i class="bi bi-person"></i> 用户中心</a>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="{% url 'logout' %}"><i class="bi bi-box-arrow-right"></i>
                            退出登录</a></li>
                    </ul>
                {% else %}
                    <li class="nav-item">
                        <span class="nav-link">
                            <i class="bi bi-person-x"></i> 匿名用户
                        </span>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'login' %}">
                            <i class="bi bi-box-arrow-in-right"></i> 登录
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'register' %}">
                            <i class="bi bi-person-plus"></i> 注册
                        </a>
                    </li>
                {% endif %}
            </li>
        </ul>

        </div>
    </div>
</nav>

<div class="container mt-4">
    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }}">
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}

    {% block content %}{% endblock %}
</div>

<footer class="text-center">
    <div class="container">
        <p>&copy; 2025 Task Management System</p>
    </div>
</footer>


<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<script>
    // Enable Bootstrap tooltips
    document.addEventListener('DOMContentLoaded', function () {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        });
    });
</script>
{% block scripts %}{% endblock %}
</body>
{% block extra_js %}{% endblock %}
</html>